<!-- 从业者端-师资介绍列表 -->
<template>
	<view class="course-container">
		<!-- 讲师列表 -->
		<view class="course-list">
			<view class="course-item" v-for="(teacher, index) in teacherList" :key="index" @click="teacherResume(teacher.bt_code)">
				<view class="course-left">
					<u-image :src="teacher.bt_header_uri[0].url" width="220rpx" height="240rpx" mode="aspectFill" radius="4"></u-image>
				</view>
				<view class="course-right">
					<text class="course-name">{{ teacher.bt_name }}</text>
					<view class="course-footer">
						<text class="course-count">{{ teacher.bt_zhicheng }}</text>
						<text class="course-count">|</text>
						<text class="course-price">{{ yearServer(teacher.bt_workdate) }}</text>
					</view>
					<!-- 专业领域 -->
					<view class="skill-tags">
						<text class="course-count">{{ teacher.bt_zyly }}</text>
	<!-- 					<text v-for="(skill, skillIndex) in teacher.skills" :key="skillIndex" class="skill-tag">
							{{ skill }}
						</text> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/utils/util.js'
	export default {
		data() {
			return {				
				teacherList: [{
						id: 1,
						cover: '/static/course1.jpg',
						name: '张老师',
						level: '一级',
						year: 5,
						jobtitle: '中级',
						lessonCount: 45,
						price: '80.00',
						category: '前端开发',
						purchased: false,
						skills: ['前端架构', '性能优化', 'Vue.js', 'React.js']
					},
					{
						id: 2,
						cover: '/static/course2.jpg',
						name: '李老师',
						level: '一级',
						year: 10,
						jobtitle: '高级',
						lessonCount: 45,
						price: '80.00',
						category: 'UI设计',
						purchased: true,
						skills: ['前端架构', '性能优化']
					}
				],
			}
		},
		onShow() {
			this.$u.api.querybtlist().then(res => {
				console.log('讲师列表：', res)
				this.teacherList = res.data.base_info
			})
		},
		methods: {
			// 计算工作年限
			yearServer(workTime) {
				let diff = util.calculateDateDifference(workTime)
				let workYear = ''
				if (diff.years == 0){
					workYear = diff.months+'个月';
				} else 	if(diff.months == 0){
					workYear = diff.years+'年';
				} else {
					workYear = diff.years+'年'+diff.months+'个月';
				}	
				return workYear
							
			},
			// 师资介绍，跳转到讲师简历
			teacherResume(id) {
				uni.navigateTo({
					url: `/pages/Practitioner/teacherIntroduce/teacherList?btcode=${id}`
				});
			},
			change(index) {
				this.$u.toast(`点击了第${index}项`);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.course-container {
		padding: 20rpx;
		background-color: #f5f7fa;
	}

	.category-header {
		padding: 20rpx 0;

		.category-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.filter-section {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 8rpx;
		// margin-bottom: 20rpx;

		.filter-title {
			font-size: 30rpx;
			color: #333;
			margin-bottom: 20rpx;
			display: block;
		}

		.filter-tags {
			display: flex;
			flex-wrap: wrap;

			.tag-item {
				margin-right: 20rpx;
				margin-bottom: 15rpx;
			}
		}
	}

	.course-list {
		background-color: #fff;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.course-item {
		display: flex;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;

		&:last-child {
			border-bottom: none;
		}
	}

	.course-left {
		// width: 168rpx;
		height: 224rpx;
		margin-right: 20rpx;
	}

	.course-right {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.course-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.course-level,
	.course-teacher {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.course-rating {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;

		.rating-value {
			font-size: 26rpx;
			color: #ff9900;
			margin-left: 10rpx;
		}
	}

	.course-footer {
		display: flex;
		// justify-content: space-between;
		margin-top: 10rpx;

		.course-count {
			font-size: 26rpx;
			color: #999;
			margin-right: 10px;
		}

		.course-price {
			font-size: 26rpx;
			// color: #f56c6c;
			// font-weight: bold;
		
		}
	}
	
	.skill-tags {
		display: flex;
		flex-wrap: wrap;
		// gap: 8rpx;
		margin-top: 10px;
	
		.skill-tag {
			font-size: 20rpx;
			// color: #2979ff;
			// background-color: #e6f0ff;
			padding: 4rpx 12rpx;
			border-radius: 20rpx;
			// display: inline-block;
		}
	}

	.course-actions {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 15rpx;


		.course-category {
			font-size: 24rpx;
			color: #999;
			background-color: #f5f7fa;
			padding: 6rpx 12rpx;
			border-radius: 20rpx;
			margin-left: 100rpx;
		}

		/deep/ .u-size-medium {
			height: 30px;
			line-height: 30px;

		}
	}
</style>